<template>
  <div>
    <van-nav-bar
      v-if="type === 'list'"
      title="添加列表"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
    />
    <van-address-list
      v-if="type === 'list'"
      @select="selectAddr"
      v-model="chosenAddressId"
      :list="list"
      :disabled-list="disabledList"
      disabled-text="以下地址超出配送范围"
      default-tag-text="默认"
      @add="onAdd"
      @edit="onEdit"
    />

    <van-nav-bar
      v-if="type === 'edit'"
      title="添加地址"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft1"
    />
    <van-address-edit
      v-show="type === 'edit'"
      show-delete
      :address-info="addressInfo"
      :area-list="areaList"
      :show-set-default="false"
      @delete="onDelete"
      :area-columns-placeholder="['请选择', '请选择', '请选择']"
      @save="onSave"
    ></van-address-edit>
  </div>
</template>

<script setup>
import { areaList } from "@vant/area-data";
import { ref, onMounted } from "vue";
import { useRouter, useRoute } from "vue-router";
// import { areaList } from '@vant/area-data';
import {
  defaultAddr,
  addressList1,
  addAddr,
  listByPid,
  updateAddr,
  deleteAddr,
} from "../api/address";
let type = ref("list");
let router = useRouter();
let chosenAddressId = ref(0);
let disabledList = ref([]);
let addressInfo = ref({});
// let areaList = areaList;
let list = ref([]);
let route = useRoute();
const onClickLeft = () => {
  console.log(route, "route");
  history.back();
};
onMounted(() => {
  init();
});
async function init() {
  const list1 = await addressList1();
  list1.map((result) => {
    result.tel = result.mobile;
    result.address =
      result.province +
      " " +
      result.city +
      " " +
      result.area +
      " " +
      result.addr;
    result.name = result.receiver;
    result.isDefault = result.commonAddr === 1 ? true : false;
    result.id = result.areaId;
  });
  list.value = list1;
}
function selectAddr(item, index) {
  console.log(item, index, "选择");

  defaultAddr(item.addrId).then((r) => {
    init();
  });
}

function onClickLeft1() {
  init();
  type.value = "list";
}
function onAdd() {
  type.value = "edit";
  addressInfo.value = {}
}

function onEdit(data) {
  Object.assign(addressInfo.value, {
    id: data.addrId,
    tel: data.mobile,
    province: data.province,
    city: data.city,
    county: data.area,
    name: data.receiver,
    addressDetail: data.addr,
    areaCode: "",
    isDefault: data.commonAddr === 1 ? true : false,
  });
  type.value = "edit";
}
async function onSave(data) {
  const province = await listByPid({ pid: 0 });
  province.map(async (result) => {
    if (data.province === result.areaName) {
      data.provinceId = result.areaId;
      const city = await listByPid({ pid: result.areaId });
      city.map(async (result) => {
        if (data.city === result.areaName) {
          data.cityId = result.areaId;
          const city = await listByPid({ pid: result.areaId });
          city.map(async (result) => {
            if (data.county === result.areaName) {
              data.countyId = result.areaId;
              const postData = {
                receiver: data.name,
                addr: data.addressDetail,
                mobile: data.tel,
                province: data.province,
                provinceId: data.provinceId,
                city: data.city,
                cityId: data.cityId,
                area: data.county,
                areaId: data.countyId,
                commonAddr: data.isDefault ? 1 : 0,
              };
              console.log("走进来");
              if (data.id) {
                postData.addrId = data.id;
                updateAddr(postData).then(() => {
                  onClickLeft1();
                });
              } else {
                addAddr(postData).then(() => {
                  onClickLeft1();
                });
              }
              addressInfo.value = {};
            }
          });
        }
      });
    }
  });
}
function onDelete(data) {
  deleteAddr(data.id).then(() => {
    onClickLeft1();
  });
}
</script>
<style lang="scss" scoped>
::v-deep .van-nav-bar__text {
  color: #ee0a24;
  font-weight: 600;
}

::v-deep .van-icon-arrow-left {
  color: #ee0a24;
  font-weight: 600;
}
::v-deep .van-address-item .van-radio__icon--checked .van-icon {
  background: red;
  border-color: red;
}
::v-deep .van-button--primary {
  background: red;
  border-color: red;
}
::v-deep .van-tag--primary {
  background: red;
}
</style>
